<template>
    <div class="goodsInfo-container">
        <transition @before-enter="beforeEnter"
                    @enter="enter"
                    @after-enter="afterEnter"><div class="ball" v-show="ballFlag" ref="ball"></div>
        </transition>
        <!-- <div class="ball" v-show="ballFlag"></div> -->
        <!-- 轮播图区域 -->
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <swiper :lunbotuList="lubotu" :isfull="false"></swiper>
                </div>
            </div>
        </div>

        <!-- 中间区域:购物车 -->
        <div class="mui-card">
            <div class="mui-card-header">{{goodsInfoList.title}}</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>市场价&nbsp;: &nbsp;&nbsp;<del>{{goodsInfoList.market_price}}</del> &nbsp;&nbsp;&nbsp;销售价&nbsp;:&nbsp;&nbsp;
                    <span class="sell_price">￥{{goodsInfoList.sell_price}}</span></p>
                    <p>购买数量&nbsp;: <numberBox :max="goodsInfoList.stock_quantity" @func="countFromNBox"> </numberBox> </p>
                    <p>
                       <mt-button type="primary" size="small">立即购买</mt-button>
                       <mt-button type="danger" size="small" @click="addToCar">加入购物车</mt-button>
                    </p>
                </div>
            </div>
        </div>
        <!-- 底部区域:商品参数 -->
        <div class="mui-card">
            <div class="mui-card-header"> 商品参数 </div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>商品货号&nbsp;:{{goodsInfoList.goods_no}}</p>
                    <p>库存情况&nbsp;:{{goodsInfoList.stock_quantity}}件</p>
                    <p>上架时间&nbsp;:{{goodsInfoList.add_time | dateFormat}}</p>
                </div>
            </div>
            <div class="mui-card-footer">
                <router-link tag="div" :to="'/home/goodsDesc/'+id">
                    <mt-button type="primary" size="large" plain>图文介绍</mt-button>
                </router-link>
                <router-link tag="div" :to="'/home/goodsCmt/'+id">
                    <mt-button type="danger" size="large" plain>图文介绍</mt-button>
                </router-link>
            </div>
        </div>
    </div>
</template>
<script>
import swiper from "../subcomponents/luntobu.vue";
import numberBox from "../subcomponents/number_box.vue";
export default {
    data() {
        return {
            id: this.$route.params.id,
            lubotu:[],
            goodsInfoList: [],
            ballFlag:false,
            selectCount:1,
        }
    },
    created() {
        this.getGoodsLunBo();
        this.getGoodsInfoList();
    },
    methods: {
        getGoodsLunBo(){
            this.$http.get("http://www.liulongbin.top:3005/api/getthumimages/"+this.id).then(result => {
                if(result.body.status===0){
                    result.body.message.forEach(item => {
                        item.img=item.src;
                    });
                    // console.log(result.body);
                    this.lubotu=result.body.message;
                }
            })
        },
        getGoodsInfoList(){
            this.$http.get("http://www.liulongbin.top:3005/api/goods/getinfo/"+this.id).then(result => {
                if(result.body.status===0){
                    // console.log(result.body);
                    this.goodsInfoList=result.body.message[0];
                }
            })
        },
        addToCar(){
            this.ballFlag=!this.ballFlag;
            // 点击时，构造数据格式，并保存到公共数据中
            var dataObj={
                id:this.id,
                count:this.selectCount,
                price:this.goodsInfoList.sell_price,
                selected:true
            };
            //改变公共数据，必须通过mutation改动，存储到car中
            this.$store.commit("addToCarM",dataObj);
        },
        beforeEnter(el){
            el.style.transform="translate(0px,0px)";
        },
        enter(el,done){
            el.offsetWidth;
            //为了实现完美的小球动画，不能够把小球移动距离写死了，同构dom操作动态计算移动距离
            var ballPosition=this.$refs.ball.getBoundingClientRect();
            var shopBallPositon=document.getElementById("shopBallPositon").getBoundingClientRect();
            var xDist=shopBallPositon.left-ballPosition.left;
            var yDist=shopBallPositon.top-ballPosition.top;
            // console.log(ballPosition);
            el.style.transform="translate("+xDist+"px,"+yDist+"px)";
            el.style.transition="all 1s ease";
            done();
        },
        afterEnter(el){
            this.ballFlag=!this.ballFlag;
        },
        countFromNBox(count){
            this.selectCount=count;
            // console.log(this.selectCount);
        },
    },
    components:{
        swiper,
        numberBox,
    }
}
</script>
<style lang="less" scoped>
.goodsInfo-container {
    background-color: #eee;
    overflow: hidden; //去除因为margin造成的塌陷
    .mint-swipe{
        text-align: center;
    }
    .mui-card-footer{
        display: block;
        button{
            margin:15px 0px;
        }
    }
    .sell_price{
        font-size:16px;
        color:red;
        font-weight: bold;
    }
    .ball{
        height: 15px;
        width: 15px;
        border-radius: 50%;
        background-color: red;
        position:absolute;
        left: 144px;
        top:408px;
        z-index:999;


    }
}
</style>